<template >
	<view style="height: 100%;">
		<view style="background-color: #528FFF;width: 100%;height: 30%;">
		</view>
		<view class="card">
			<view class="login_form shadow">
				<view class="content">
					<view class="uni-flex uni-row" style="padding-top: 30px;">
						<view class="uni-center text" :class="usertype == '0' ? 'active' : 'unactive'" id="0" @click="changeuser">学员/导师</view>
						<view class="uni-center text" :class="usertype == '1' ? 'active' : 'unactive'" id="1" @click="changeuser">工作人员</view>
						<view class="uni-center text" :class="usertype == '2' ? 'active' : 'unactive'" id="2" @click="changeuser">公司经理</view>
					</view>
					<view class="uni-column" style="margin-top: 25px;">
						<input class="uni-input input" v-model="username" type="number" placeholder="请输入账号" />
						<input class="uni-input input" v-model="password"   placeholder="请输入密码" />
					</view>
					<view class="uni-flex uni-row" style="font-size: 29rpx; color:#666666 ; margin-top: 25px; -webkit-justify-content: space-between;justify-content: space-between;">
						<view>
							<checkbox-group>
								<label>
									<checkbox  checked="false" />记住密码
								</label>
							</checkbox-group>
						</view>
						<view>忘记密码</view>
					</view>
					<view class="uni-column" style="padding-top: 20px; padding-bottom: 60px;">
						<button class="loginbtn" @click="login()">登陆</button>
						<button class="regbtn" style="margin-top: 15px;">注册</button>
					</view>
				</view>
			</view>
		</view>
		<view  style="color:#8f9195;display: flex;flex-direction: row; justify-content: center;width: 100%; position: absolute; top: 97%;">
			<view>
				<checkbox-group>
					<label>
						<checkbox  checked="false" />同意《用户使用协议》
					</label>
				</checkbox-group>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				httpurl: getApp().globalData.weburl, //app.vue中定义的全局变量，后端ip地址
				usertype:'0',
				username:'',
				password:'',
			}
		},
		onLoad() {

		},
		methods: {
			changeuser(e){
				console.log("切换用户类型为："+e.currentTarget.id);
				this.usertype=e.currentTarget.id;
			},
			login(){
				console.log("登陆");
				console.log(this.usertype);
				console.log(this.username);
				console.log(this.password);
				var that = this;
				//后台请求验证账号密码
				uni.request({
				    url: that.httpurl+'login/', //服务器地址+接口名
				    data: {
						phone:that.username,
						password:that.password,
						usertype:that.usertype
				    },
					method: 'POST',
				    header: { 
						'X-Requested-With': 'XMLHttpRequest',
						"Accept": "application/json",
						"Content-Type": "application/json; charset=UTF-8"
					},
					dataType: 'json',
				    success: (res) => {
						console.log("request success");
				        console.log(res.data);
						//登陆成功
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.state==1){
							getApp().globalData.usertype=that.usertype; //设置全局用户类型
							if(that.usertype=='0'){
								getApp().globalData.userid=res.data.user.s_id;  //设置全局用户id
								getApp().globalData.name=res.data.user.s_name;
							}
							else if(that.usertype=='1'){
								getApp().globalData.userid=res.data.user.w_id;  //设置全局用户id
							}
							else if(that.usertype=='2'){
								getApp().globalData.userid=res.data.user.m_id;  //设置全局用户id
							}
							that.goto_mainpage();
						}
						else{
							console.log(res.data.msg);
						}				
				    },
					fail: (res) => {
						console.log("request fail");
				    },
				});
		
			},
			goto_mainpage(){
				if(this.usertype=='0'){
					uni.setTabBarItem({
						index:0,
						pagePath:"/pages/user/activity/activity",
						text:"活动",
						iconPath:"static/icon/tab/活动.png",
						selectedIconPath:"static/icon/tab/活动_sel.png"
					});
					uni.setTabBarItem({
						index:1,
						pagePath:"/pages/user/grabActivity/grabActivity",
						text:"导师",
						iconPath:"static/icon/tab/活动记录.png",
						selectedIconPath:"static/icon/tab/活动记录_sel.png"
					});
					uni.setTabBarItem({
						index:2,
						pagePath:"/pages/user/mine/mine",
						text:"我的",
						iconPath:"static/icon/tab/主页.png",
						selectedIconPath:"static/icon/tab/主页_sel.png"
					});
					uni.switchTab({
						url: '../user/activity/activity'
					});
				}
				else if(this.usertype=='2'){
					uni.setTabBarItem({
						index:0,
						pagePath:"/pages/manager/approval/approval",
						text:"审批",
						iconPath:"static/icon/tab/审批.png",
						selectedIconPath:"static/icon/tab/审批_sel.png"
					});
					uni.setTabBarItem({
						index:1,
						pagePath:"/pages/manager/staffManagement/staffManagement",
						text:"人事",
						iconPath:"static/icon/tab/部门管理.png",
						selectedIconPath:"static/icon/tab/部门管理_sel.png"
					});
					uni.setTabBarItem({
						index:2,
						pagePath:"/pages/manager/mine/mine",
						text:"我的",
						iconPath:"static/icon/tab/主页.png",
						selectedIconPath:"static/icon/tab/主页_sel.png"
					});
					uni.switchTab({
						url: '../manager/approval/approval'
					});
				}
				else{
					uni.setTabBarItem({
						index:0,
						pagePath:"/pages/staff/activity/activity",
						text:"活动",
						iconPath:"static/icon/tab/活动.png",
						selectedIconPath:"static/icon/tab/活动_sel.png"
					});		
					uni.setTabBarItem({
						index:1,
						pagePath:"/pages/staff/mine/mine",
						text:"我的",
						iconPath:"static/icon/tab/主页.png",
						selectedIconPath:"static/icon/tab/主页_sel.png"
					});
					uni.setTabBarItem({
						index:2,
						visible:false
					});
					uni.switchTab({
						url: '../staff/activity/activity'
					});
				}
			}
		}
	}
</script>

<style>
page {
  height: 100%;
}
.card{
	position: absolute; 
	width:100%;
	height:auto; 
	top:15%;
	display: flex; 
	flex-direction: row; 
	/*align-items: center;  //垂直居中*/
	justify-content: center; //水平居中
}
.login_form{
	width:85%;
	height: auto;
	background-color:white;
	border-radius: 10px;
	display: flex;
	flex-direction: row; 
	/*align-items: center;  //垂直居中*/
	justify-content: center; //水平居中
}
.content{
	width:90%;
	height: auto;
}

.shadow{
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, .3);
}
.active{
	border-bottom:2px solid #528FFF;
	color:#528FFF;
	font-weight: 450;
}
.unactive{
	color:#666666;
}
.text {
	margin: 15rpx 15rpx;
	padding: 0 5rpx;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	font-size: 30rpx;
}
.input{
	margin-top: 10px;
	border-radius: 10px;
	background-color: #eaeeee;
}
.loginbtn{
	color: white;
	background-color: #528FFF;
	border-radius: 10px;
}
.regbtn{
	color: #528FFF;
	background-color: white;
	border-radius: 10px;
	border: 1px solid #528FFF;

}
</style>
